<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加盟商</title>
    <link rel="stylesheet" href="./assets/css/mdui.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./assets/js/mdui.min.js"></script>
    <script src="./assets/js/config.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  

    <style>
        .mdui-card{
            margin:1rem 1rem;
            border-radius:1rem;
           
        }
        .mdui-card .cont{
            background-color: #fff;
            background-color:rgba(0,0,0,0.3); 
        }
        body{
            background-color: #f9f9f9;
        }
        header{
            background-color: #fff;
        }
        #loading{
            position: fixed;
            z-index: 999;

            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.3); 
            display: none;
            /* margin:1rem auto; */
        }
        #load{
            line-height:100%;
        }
        .card-list{
            border-radius: 1rem;
            margin:1rem auto;
            width:96%;
        }

        .card-list .title{
            font-size:1rem;
            margin:1rem 0;
        }
        .card-list .num{
            font-size:1.5rem;
            color:red;
            margin:1rem 0;
        }
        .card-list .conts{
            
            padding:1rem 0;
        }
        .card-list button{
            
            height:1.5rem;
            line-height:1.5rem;
        }
        .mdui-color-pink{
            background-color: #FB9004 !important;
        }
        .mdui-tab-active{
            color:#3AC8AE !important
        }
        
        
    </style>
</head>
<body class="mdui-color-theme-accent">

    <div  id="loading"> 
        <div id="load" class="mdui-center mdui-progress">
            <div class="mdui-center mdui-progress-indeterminate"></div>
        </div>
        
    </div>
    
    <header class="mdui-shadow-2">
        <div style="color:#000" id="tabs" class="mdui-tab mdui-tab-centered" mdui-tab>
            <a href="#example3-tab1"  cont="con1" class="tabs mdui-ripple"><span>未使用<div id="num1" style="margin-left:5px;display:inline-block;width: 16px;border-radius:10px;color:#fff;background-color:red;">1</div></span></a>
            
            <a href="#example3-tab2" id="qq"  cont="con2" class="tabs mdui-ripple"><span>已使用<div id="num2" style="margin-left:5px;display:inline-block;width: 16px;border-radius:10px;color:#fff;background-color:red;">1</div></span></a>
            <a href="#example3-tab3"  cont="con3" class="tabs mdui-ripple"><span>已过期<div id="num3" style="margin-left:5px;display:inline-block;width: 16px;border-radius:10px;color:#fff;background-color:red;">1</div></span></a>
            <a href="#example3-tab4" onclick="logout()" cont="con4" class=" mdui-ripple"><span>退出登录</span></a>
        </div>
    </header>

    <div class="content" id="con1">
        <div v-for="item in list" class="mdui-card">
            <div class="mdui-card-media">
              <img style="height:145px;" :src="item.t_ticket_image"/>
            </div>
            <div class="mdui-card-actions">
                <div style="margin-bottom:0.5rem;">
                    <div class="mdui-card-primary-title">{{item.t_ticket_name}} </div>
                 
                </div>    
                <div>
                    <div style=" width: 68%;display:inline-block;font-size:0.8rem;" class="mdui-card-primary-subtitle">有效期 {{item.d_begin}} 到 {{item.d_expire}}</div>
                    <button onclick="go('./share.html?id='+$(this).attr('id'),$(this))"  :t_item_id="item.t_item_id" :id="item.t_id" class="mdui-color-pink mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">分享</button>
                </div>
               
            </div>
        </div>
        
  

    </div>
    <style>
            .content .card{
                padding:1.5rem;
                margin:0.5rem auto;
                width:80%;
                border-radius: 1rem;
            }

            .content .card-title{
                font-size:1rem;
                margin:1.5rem auto;
            }
            .content .time{
                display: inline-block;
                width: 75%;
            }
            .content button{
                background-color: #FB9004;
                height: 2rem;
                color:#fff;
                min-width:1rem;
            }
            #search_input{
                border-radius: 1rem;
                width: 80%;
                border: 1px solid #ccc;
                height:2rem;
            }
            #search{
                width:90%;
                margin:0.5rem auto;
            }
      
        </style>
    <div  class="content" style="display:none;"  id="con2">
            
        <!-- <div id="search">
            <input id="search_input" type="text">     <button onclick="search()" class="mdui-btn mdui-btn-raised">搜索</button>

        </div> -->

       
        <div v-for="item in list" class="mdui-shadow-2 card">
            <div class="card-title">
                    {{item.t_ticket_name}} 
            </div>
          
                <div style="margin:15px auto; color: red; font-size: 16px;">   <span style="">领取人:{{item.name}}</span>   <span style="float:right">手机号:{{item.phone}} </span> </div>
                <div class="time">   <span style="color:#909090">有效期: </span> {{item.d_begin}} 到 {{item.d_expire}}  </div>  <button  onclick="location = './ticket_detail.html?id='+$(this).attr('tid')" :tid="item.t_id"  style="width:18%;text-align:center;padding:0" class="mdui-btn mdui-btn-raised">详情</button>
        </div>

    </div>
    <div  class="content"  style="display:none;"   id="con3">
                    <div v-for="item in list" class="mdui-shadow-2 card">
            <div class="card-title">
                    {{item.t_ticket_name}} 
            </div>
                <div class="time">   <span style="color:#909090">有效期: </span> {{item.d_begin}} 到 {{item.d_expire}}  </div>  
                <button disabled  class="mdui-btn mdui-btn-raised">已过期</button>
        </div>
    </div>
</body>
</html>

<script>

function logout()
        {
       
                setCookie('islogin', '');
                setCookie('uid','');
                setCookie('openid','');
                alert('退出成功')
        }

        
   $(".tabs").on('click',function(){
       $(".content").hide()
       $("#"+$(this).attr('cont')).show();
  
   })
   function go(url,that)
      {
        location = url+'&t_item_id='+that.attr('t_item_id');
      }
   function loading(status)
   {	
        if(status){
            $("#loading").hide();
        }else{
            $("#loading").show();
        }
   }


   var con1 = new Vue({
       el:'#con1',
       data:{
           list:{},
           domain:domain
       }
   })
   var con2 = new Vue({
       el:'#con2',
       data:{
           list:{},
           domain:domain
       }
   })
   var con3 = new Vue({
       el:'#con3',
       data:{
           list:{},
           domain:domain
       }
   })


   alert('您登陆的ID:'+getCookie('uid'))
   function search()
   {    
		loading();
        $.post(domain+'/api/client/memberfxqInfo',{memberid:getCookie('uid'),oldname:$("#search_input").val()},function(data){
		loading('close');
        console.log( data.data.usedFxq);
        if(data.code == 200){
                con2.list = data.data.oldFxq;
        }else{
                alert(data.data);
        }
        
    },'json')
   }
   loading();
   $.post(domain+'/api/client/memberfxqInfo',{memberid:getCookie('uid')},function(data){
       console.log( data.data.usedFxq);
       loading('close');
       if(data.code == 200){
            con1.list = data.data.usedFxq;
            con2.list = data.data.oldFxq;
            con3.list = data.data.expireFxq;



            $("#num1").html(data.data.usedNum);
            $("#num2").html(data.data.oldNum);
            $("#num3").html(data.data.expireNum);

       }else{
            alert('网络错误,请刷新');
       }
       
   },'json')
</script>

